<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;position: absolute;left:0px;border-radius:50%;}
        .line{width:1000px;height:600px;position:absolute;border: solid 1px black;}
    </style>
</head>
<body>
    <div class="line">
        <div class="box"></div>
    </div>
</body>
<script>

    const obox = document.querySelector(".box");

    const target = 500;
    let speed = 6;
    let time;


    let speedX = 5;
    const targetR = 900;

    document.onclick = function(){

        clearInterval(time);
        time = setInterval(()=>{

            // 随着时间的变化，增加步长（重力相关）
            // speed++;

            if(target-obox.offsetTop < speed){
                obox.style.top = target + "px";

                speed = -speed;

                // 重力相关
                // speed = -speed * 0.7;
                // if(Math.abs(speed) < 1){
                //     clearInterval(time)
                // }

            }else{
                obox.style.top = obox.offsetTop + speed/2 + "px";
            }

            if(obox.offsetTop <= 0){
                obox.style.top = 0 + "px";
                speed = -speed;
            }else{
                obox.style.top = obox.offsetTop + speed/2 + "px";
            }

            if(targetR-obox.offsetLeft < speedX){
                obox.style.left = targetR + "px";
                speedX = -speedX;
            }else{
                obox.style.left = obox.offsetLeft + speedX/2 + "px";
            }

            if(obox.offsetLeft <= 0){
                obox.style.left = 0 + "px";
                speedX = -speedX;
            }else{
                obox.style.left = obox.offsetLeft + speedX/2 + "px";
            }
        }, 30);

    }
</script>
</html>